<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
	</head>
	<body>
		<div id="app">
			<!-- 特点: 如果页面没有渲染完成,则直接展现给用户
					   插值表达式需要直接显示
				 注意事项:  只有显示时采用,输入操作不可使用
				 1.v-text指令: 如果页面没有渲染完成,则不显示信息
			 -->
			 {{msg}}
			<h1 v-text="msg"></h1>
	
			<!-- 2.v-html 直接渲染html标签 -->
			<div v-html="h3Html"></div>
			
			<!-- 3.v-pre  跳过预编译 显示标签体本身 -->
			<div v-pre>{{msg}}</div>
			
			<!-- 4.v-once 只渲染一次 -->
			<div v-once>{{once}}</div>
			
			
		</div>
	<!--  -->	
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					msg: "您好VUE",
					h3Html: "<h3>我需要html渲染</h3>",
					once: "我只能被渲染一次"
				}
			})
		</script>	
	</body>
</html>
